import { NavLink, Route } from 'react-router-dom'
import RankingDetail from '../RankingDetail'

export default function Ranking(props) {
  return (
    <div>
      <nav className='nav'>
        <NavLink
          className='nav-link'
          aria-current='page'
          to='/findmusic/ranking/bsb'
        >
          飙升榜
        </NavLink>
        <NavLink className='nav-link' to='/findmusic/ranking/xgb'>
          新歌榜
        </NavLink>
        <NavLink className='nav-link' to='/findmusic/ranking/ycb'>
          原创榜
        </NavLink>
      </nav>
      <div className='alert alert-light' role='alert'>
        {/* //!上面飙升榜、新歌榜，原创榜公用的是同一个组件 */}
        <Route path='/findmusic/ranking/:id' component={RankingDetail} />
      </div>
    </div>
  )
}
